import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { Card, Divider, message, Radio } from 'antd';
import { pageUnitList, detail } from '@/services/CheckBook';
import Header from "./components/DetailHeader";
import {getDetailColumns} from './columns'

class Detail extends React.Component {
  constructor(props) {
    super(props);
    const id = props.location.query.id;
    this.proTableRef = React.createRef();
    this.id = id;
    this.state = {
      params: {
        cbId: id,
        finished: true
      },
      detail: {},
      currentRadio: 1
    }
  }

  /* 监听redio 变化 */
  onReadioChange = (e) => {
    const value = e.target.value;
    const {currentRadio, params} = this.state;
    if (currentRadio !== value) {
      params.finished = value === 1;
      this.setState({
        currentRadio: value,
        params
      })
      this.proTableRef.current.reload();
    }
  }

  /* 获取详情 */
  getDetail = async () => {
    try {
      const id = this.id;
      if (!id) throw new Error('非法请求');
      const res = await detail(id);
      this.setState({ detail: res });
    } catch (e) {
      console.error(e);
      e.message ? message.error(e.message) : null;
    }
  }

  /* 获取table列表数据 */
  getPageList = async (currentParams) => {
    try {
      const params = this.state.params;
      const res = await pageUnitList({
        ...params,
        ...currentParams
      })
      this.setState({dataSource: res.data})
      return {
        success: true,
        data: res.data,
        total: res.totalSize
      }
    } catch (e) {
      console.error(e)
    }
  }

  componentDidMount() {
    this.getDetail();
  }

  render() {
    const {proTableRef} = this;
    const {detail, currentRadio} = this.state;
    const columns = getDetailColumns(currentRadio);
    return (
      <PageContainer>
        <Card
          style={{ borderBottom: 1 }}
          headStyle={{ borderBottom: "none" }}
          bodyStyle={{ paddingTop: 0, paddingBottom: 0 }}
          title="预订单信息"
          bordered={false}>
          <Header detail={detail} />
          <Divider />
        </Card>
        <ProTable
          actionRef={proTableRef}
          rowKey='id'
          headerTitle={
            <Radio.Group value={currentRadio} onChange={this.onReadioChange}>
              <Radio value={1}>已完成</Radio>
              <Radio value={0}>未完成</Radio>
            </Radio.Group>
          } 
          search={false}
          columns={columns}
          request={this.getPageList} />
      </PageContainer>
    )
  }

}

export default Detail